<template>
  <div>
    <el-tabs type="border-card" @tab-click="tabChange" v-model="activeName">
      <el-tab-pane :lazy="true" name="公开题目" label="公开题目">
        <router-view name="publicQuestion"></router-view>
        <router-view
          name="chgQuestion"
          :backName="activeName"
          :submit="asynccreateorupdatequestion"
        ></router-view>
        <router-view name="questionDetail"></router-view>
      </el-tab-pane>
      <el-tab-pane v-if="isVip" :lazy="true" name="精选题目" label="精选题目">
        <router-view name="vipQuestion"></router-view>
        <router-view
          name="chgQuestion"
          :backName="activeName"
          :submit="asynccreateorupdatequestion"
        ></router-view>
        <router-view name="questionDetail"></router-view>
      </el-tab-pane>
      <el-tab-pane :lazy="true" name="团队题目" label="团队题目">
        <router-view name="teamQuestion"></router-view>
        <router-view name="questionDetail"></router-view>
      </el-tab-pane>
      <el-tab-pane :lazy="true" name="我的题目" label="我的题目">
        <router-view name="myQuestion"></router-view>
        <router-view
          name="chgQuestion"
          :backName="activeName"
          :submit="asynccreateorupdatequestion"
        ></router-view>
        <router-view name="questionDetail"></router-view>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup lang="ts">
import { TabPaneName, TabsPaneContext } from "element-plus";
import { computed, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import {
  asyncadmincreateorupdatequestion,
  asynccreateorupdatequestion,
} from "../../../api/index";
import { Storekey } from "../../../interface";
import Studycodemodel from "../../../mysql_interface/studycodemodel";

const router = useRouter();
const route = useRoute();
const store = useStore(Storekey);
const user = computed<Studycodemodel.Iuser>(() => {
  return store.getters.getuser;
});
const teamId = computed(() => {
  return user.value?.teamid;
});
const isVip = computed(() => {
  return user.value?.uservip?.find((c) => c.viplistid === 1);
});
// 判断权限
const hasPermission = computed(() => {
  // return false
  return ["manage", "admin"].includes(
    user.value?.type?.toLocaleLowerCase() || ""
  );
});

const activeName = ref<TabPaneName>();

onMounted(() => {
  activeName.value = hasPermission.value ? "公开题目" : "团队题目";
  tabChange({ paneName: activeName.value });
});

// 跳转
function tabChange({ paneName: name }: TabsPaneContext) {
  activeName.value = name;
  router.push({ name: name });
}
</script>

<style scoped>
.router-link-active {
  color: cadetblue;
}
</style>
